<template>
  
   
	<view class="uni-container" >
		<view v-if='hasLeftWin'>234
			<view  class="uni-header-logo">
				<image class="uni-header-image" src="/static/img/ren.png"></image>
				<text>{{ name }}1</text>
			</view>
		</view>
		
			
			
		<view class="uni-navigate-item" v-for="(item,key) in pages" :key="item.id" @click="goDetailPage(item)">
			<image class="uni-navigate-item-image" :src="item.img"></image>
			<text class="uni-navigate-text">{{item.name }}</text>
			<text class="uni-navigate-icon uni-icon">></text>
		</view>
			
		
	</view>
  
  
</template>

<script>
	import {
		
		mapState
	} from 'vuex'
export default {
  data() {
    return {
		
      name:'',
      pages: [
      	{
      		id:1,
      		name:'更改密码',
      		url:'/pages/login/pwdchange/pwdchange',
      		img:"/static/img/saomiao.png"
      	},
      	{
      		id:2,
      		name:'退出登录',
      		url:'',
      		img:"/static/img/saomiao.png"
      	},
      		
      ]
    };
  },
  computed: {
  	...mapState({
  		
  		hasLeftWin: state => !state.noMatchLeftWindow,
  		
  	})
  },
  methods: {
    goDetailPage(item) {
    		//item.id, item2
    		if(item.id===2){
    			this.logout()
    			
    		}else{
    			uni.navigateTo({
    				url: item.url+'?name='+item.name
    			});
    		}
    			
    		
    			
    } ,
    logout() {
      // 处理退出登录逻辑
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除用户信息和状态
            uni.clearStorageSync();
            // 跳转到登录页面
            uni.redirectTo({
              url: '/pages/login/login'
            });
          }
        }
      });
    }
  }
}
</script>

<style>
.uni-container{
	padding: 15px;
	background-color: #f8f8f8;
	.uni-header-logo {
		/* #ifdef H5 */
		display: flex;
		/* #endif */
	    padding: 15px 15px;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    margin-top: 10rpx;
		.uni-header-image {
		    width: 80px;
		    height: 80px;
		}
	}
	.uni-panel {
		
	    margin-bottom: 12px;
		.uni-panel-h {
			/* #ifdef H5 */
			display: flex;
			/* #endif */
		    background-color: #ffffff;
		    flex-direction: row !important;
			/* justify-content: space-between !important; */
		    align-items: center !important;
		    padding: 12px;
			/* #ifdef H5 */
			cursor: pointer;
			/* #endif */
		}
		.uni-panel-h-on {
		    background-color: #eafdff;
		}
		.uni-panel-text {
		    flex: 1;
		    color: #000000;
		    font-size: 16px;
		    font-weight: normal;
		}
		.uni-panel-icon {
		    margin-left: 15px;
		    color: #ff5500;
		    font-size: 20px;
		    font-weight: normal;
		    transform: rotate(0deg);
		    transition-duration: 0s;
		    transition-property: transform;
		}
		.uni-icon {
			font-family: uniicons;
			font-size: 24px;
			font-weight: normal;
			font-style: normal;
			line-height: 1;
			display: inline-block;
			text-decoration: none;
			-webkit-font-smoothing: antialiased;
		}
		.uni-panel-icon-on {
		    transform: rotate(90deg);
		}
	}


.uni-navigate-item {
	/* #ifdef H5 */
	display: flex;
	/* #endif */
    flex-direction: row;
    align-items: center;
    background-color: #FFFFFF;
    border-top-style: solid;
    border-top-color: #f0f0f0;
    border-top-width: 1px;
    padding: 12px;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.uni-navigate-item:active {
    background-color: #e5fff3;
}

.uni-navigate-text {
    flex: 1;
    color: #000000;
    font-size: 14px;
    font-weight: normal;
}

.uni-navigate-icon {
    margin-left: 15px;
    color: #999999;
    font-size: 14px;
    font-weight: normal;
}
.uni-navigate-item-image{
	/* #ifdef H5 */
	display: flex;
	/* #endif */
	padding: 10px 10px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 10rpx;
	
	    width: 50px;
	    height: 50px;
	
}
.layui-nav{background:0 0}.layui-layout-left{position:absolute!important;left:200px;top:0}.layui-layout-right{position:absolute!important;right:0;top:0}.layui-container{position:relative;margin:0 auto;padding:0 15px;box-sizing:border-box}
}
</style>